<template>
	<view>
		<loading :is_init="is_init" :show_time="300"></loading>
		<b-swiper-a :list="ad_list" style="margin: 0rpx 20rpx 20rpx 20rpx;" @confirm="on_ad"></b-swiper-a>


		<b-news-list @confirm="on_news_view" :list="news_list"></b-news-list>





	</view>
</template>

<script>
	import $plugin from '@/common/plugin/banmitongcheng/banmitongcheng.js'
	export default {
		components: {

		},
		data() {
			return {
				article_list: [],
				article_msg: '加载中',
				is_init: false,
				category_list: [],
				ad_list: [],
				news_list: [],
			}
		},
		onLoad(obj) {
			this.article_page = 1;
			this.category_id = obj.id
			this.article_init();
			this.ad_init();
		},
 
		methods: {
			on_news_view(index, item) {
				uni.navigateTo({
					url: '/pages/banmitongcheng/article_view/article_view?id=' + item.id
				})
			},
			on_ad(index, item) {
				$plugin.ad_jump(item);
			},
	 
			async ad_init() {
				let that = this;
				let requestParams = {
					page: 1,
				};
				const ret = await this.Http.post('/plugin.php/banmitongcheng/api/Ad/lists', requestParams)
				if (ret.status == 200) {
					let list = ret.data.list.list.data;
					this.ad_list = list;


				}
			},
 
			async article_init() {
				let that = this;
				that.is_init = true;
				let requestParams = {
					page: this.article_page,
					category_id:this.category_id 
				};
				const ret = await this.Http.post('/plugin.php/banmitongcheng/api/Article/lists', requestParams);
				if (ret.status == 200) {
					let list = ret.data.list.list.data;
					list.forEach(function(item) {
						if (item.imgs) {
							item.imgs = JSON.parse(item.imgs)
						} else {
							item.imgs = [];
						}
					});
					if (that.article_page == 1) {
						this.news_list = list;
					} else {
						if (list.length > 0) {
							that.news_list = that.news_list.concat(list);
						}
						//少于20条
						if (list < 10) {
							this.article_msg = "没有数据了"
						}
					}

					that.is_init = true;

				}
			},
		}
	}
</script>

<style lang="scss">
	:root {
		--main-color: #f00;
		--secondary-color: #0f0;
	}

	.aaap {

		height: 80rpx;
		width: 120rpx;
		color: var(--main-color);
		background-color: var(--secondary-color);
	}


	.row-wrap {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.row-wrap-img {
		width: 80rpx;
		height: 80rpx;
		border-radius: 96rpx;
	}

	.active {
		font-size: 40rpx;
		font-weight: 800;
	}

	.active::after {
		content: '';
		width: 50%;
		height: 2px;
		display: block;
		margin: 0 auto;
		border-bottom: 10rpx solid rgba(0, 125, 254, 1);
		padding: 1px;
	}
</style>